<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>lite-monitor</title>
    <link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
</head>
<body style="background-image: url('./img/bg.jpg')">
<div id="app">
<!--    <div align="center">-->
<!--        <img src="./img/1576853070_799768.png" width = "500" height = "100" />-->
<!--    </div>-->
    <el-divider></el-divider>
    <div class="mod-liteMonitor" style='padding:20px 15% 40px 15%;font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;'>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-col :span="12">
                    <el-input v-model="dataForm.host" placeholder="ip地址" clearable></el-input>
                </el-col>
                <el-col :span="12">
                    <el-input v-model="dataForm.desc" placeholder="描述" clearable></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button @click="resetSearchFormFields()">重置</el-button>
                <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="dataList"
                border
                v-loading="dataListLoading"
                style="width: 100%;">
            <el-table-column
                    prop="monitorType"
                    header-align="center"
                    align="center"
                    width="100"
                    label="监控类型">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.monitorType === 'LOG'" size="small">日志</el-tag>
                    <el-tag v-else-if="scope.row.monitorType === 'PROCESS'" size="small">进程</el-tag>
                    <el-tag v-else-if="scope.row.monitorType === 'SQL'" size="small">数据</el-tag>
                    <el-tag v-else size="small"></el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    prop="remark"
                    header-align="left"
                    align="left"
                    label="描述">
            </el-table-column>
            <el-table-column
                    prop="schemaName"
                    header-align="center"
                    align="center"
                    width="150"
                    label="数据库">
            </el-table-column>
            <el-table-column
                    prop="hostName"
                    header-align="center"
                    align="center"
                    width="150"
                    label="ip地址">
            </el-table-column>
            <el-table-column
                    prop="port"
                    header-align="center"
                    align="center"
                    width="100"
                    label="端口">
            </el-table-column>
            <el-table-column
                    prop="frequencyDesc"
                    header-align="center"
                    align="center"
                    width="120"
                    label="监控频率">
            </el-table-column>
            <el-table-column
                    prop="enabled"
                    header-align="center"
                    align="center"
                    width="120"
                    label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.enabled === 1" size="small">启用</el-tag>
                    <el-tag v-else size="small" type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="250"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                    <el-button v-if="scope.row.enabled != 1" type="text" size="small"
                               @click="enabledHandle(scope.row.id)">启用
                    </el-button>
                    <el-button v-if="scope.row.enabled === 1" type="text" size="small"
                               @click="disabledHandle(scope.row.id)">禁用
                    </el-button>
                    <el-button type="text" size="small" @click="copyHandle(scope.row.id)">复制</el-button>
                    <el-button type="text" size="small" @click="execHandle(scope.row.id)">立即执行</el-button>
                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-show="addOrUpdateVisible" ref="addOrUpdate" @refresh="getDataList"></add-or-update>
    </div>
    <el-divider></el-divider>
    <div align="center" style="font-size:10px;">
        <a href="https://chentiefeng.top" target="_blank">Blog</a>  <a href="https://github.com/chentiefeng/lite-monitor" target="_blank">Github</a>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://unpkg.com/http-vue-loader@1.4.1/src/httpVueLoader.js"></script>
<script src="./js/app.js"></script>
<script>
  Vue.component('add-or-update', httpVueLoader('./monitor-add-or-update.vue'))
  new Vue({
    el: '#app',
    data: function () {
      return {
        dataForm: {
          hostName: '',
          remark: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let url = '/liteMonitor/page?page=' + this.pageIndex + '&limit=' + this.pageSize + '&hostName=' + this.dataForm.hostName + '&remark=' + this.dataForm.remark
        axios.get(getUrl(url)).then((res) => {
          let data = res.data
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      resetSearchFormFields () {
        Object.keys(this.dataForm).forEach(item => {
          this.dataForm[item] = null
        })
        this.getDataList()
      },
      execHandle (id) {
        let url = '/liteMonitor/execute'
        axios.post(getUrl(url), [id]).then((res) => {
          let data = res.data
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      copyHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.copy(id)
        })
      },
      enabledHandle (id) {
        let url = '/liteMonitor/enabled?id='+id
        axios.get(getUrl(url)).then((res) => {
          let data = res.data
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      disabledHandle (id) {
        let url = '/liteMonitor/disabled?id='+id
        axios.get(getUrl(url)).then((res) => {
          let data = res.data
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        let url = '/liteMonitor/delete?id='+id
        axios.get(getUrl(url)).then((res) => {
          let data = res.data
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  })

</script>
</html>